import QtQuick 1.0
//import InvMA 1.0

Rectangle {
    id: dlgAccountOptions

    signal itemClicked;
    property string itemSelected: ""

    function dlgShowHide() {
        if( state == "hidden" ) {
            state = "visible"
        } else {
            state = "hidden"
        }
    }

    width: parent.width*0.9
    height: parent.height*0.57

    radius: 10
    color: "white"
    border.color: "gray"
    border.width: 3

    clip: true
    smooth: true
    state: "hidden"

    property string _edit_jid: ""
    property string _edit_pass : ""
    property bool _edit_default: false

    onStateChanged: {
        if(state == "visible") {
            wrapperTEJid.text = _edit_jid
            wrapperTEPass.text = _edit_pass
            checkBoxDefault.state = (_edit_default ? "check" : "uncheck")
        }
    }

    Rectangle {
        id: headerDlg
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width
        height: 70
        gradient: Gradient {
            GradientStop { position: 0; color: "#919191" }
            GradientStop { position: 1; color: "#666666" }
        }
        Text {
            anchors.centerIn: parent
            font.pixelSize: 28
            color: "white"
            text: qsTr("Add account")
        }
    }

    Text {
        id: txtJid
        text: "Jid (login@server.org):"
        font.pixelSize: 28
        anchors.top: headerDlg.bottom; anchors.topMargin: 20
        anchors.left: parent.left; anchors.leftMargin: 10
    }
    MyTextInput {
        id: wrapperTEJid
        anchors.top: txtJid.bottom; anchors.topMargin: 10
        anchors.left: parent.left; anchors.leftMargin: 10
        width: parent.width - 2*anchors.leftMargin
        height: 40
        font.pixelSize: 28
        text: _edit_jid
    }

    Text {
        id: txtPass
        text: "Password:"
        font.pixelSize: 28
        anchors.top: wrapperTEJid.bottom; anchors.topMargin: 20
        anchors.left: parent.left; anchors.leftMargin: 10
    }
    MyTextInput {
        id: wrapperTEPass
        anchors.top: txtPass.bottom; anchors.topMargin: 10
        anchors.left: parent.left; anchors.leftMargin: 10
        width: parent.width - 2*anchors.topMargin
        height: 40
        font.pixelSize: 28
        text: _edit_pass
    }

    Row {
        id: checkBoxDefault
        anchors.top: wrapperTEPass.bottom; anchors.topMargin: 20
        anchors.left: parent.left; anchors.leftMargin: 10
        state: _edit_default == true ? "check" : "uncheck"
        spacing: 20
        states: [
            State {
                name: "check"
                PropertyChanges { target: imgCheckDefault; source: "qrc:/qml/images/bar_ok.png" }
            },
            State {
                name: "uncheck"
                PropertyChanges { target: imgCheckDefault; source: "qrc:/qml/images/bar_blank.png" }
            }

        ]
        Image {
            id: imgCheckDefault
            anchors.verticalCenter: parent.verticalCenter
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    if( checkBoxDefault.state == "check" ) {
                        checkBoxDefault.state = "uncheck"
                    } else {
                        checkBoxDefault.state = "check"
                    }
                }
            }
        }
        Text {
            id: txtCheckBox
            anchors.verticalCenter: parent.verticalCenter
            text: "Use default"
            font.pixelSize: 28
        }
    }


    Row {
        anchors.top: checkBoxDefault.bottom; anchors.topMargin: 20
        anchors.left: parent.left; anchors.leftMargin: 10
        spacing: 20
        Button {
            id: buttonOk
            height: 80
            text: qsTr("Ok")
            width: dlgAccountOptions.width/2 - 20
            onClicked: {
                var jid = wrapperTEJid.text
                var pass = wrapperTEPass.text
                var isDflt = (checkBoxDefault.state == "check" ? 1 : 0 )
                if( (jid=="") || (pass=="") ) {
                    return
                }

                if( (jid !=_edit_jid) || (pass != _edit_pass) || (isDflt != _edit_default) ) {
                    cppMeegIMSettings.setAccount( jid, pass, isDflt )
                }
                cppMeegIMSettings.initListOfAccounts()
                wrapperTEJid.text = ""
                wrapperTEPass.text = ""
                checkBoxDefault.state = "uncheck"
                dlgAccOptions.state = "hidden"
            }
        }
        Button {
            id: buttonCancel
            height: 80
            text: qsTr( "Cancel" )
            width: dlgAccountOptions.width/2 - 20
            onClicked: {
                dlgAccOptions.state = "hidden"
            }
        }
    }





    property int howLong: 400
    states: [
        State {
            name: "visible"
            AnchorChanges { target: dlgAccountOptions; anchors.verticalCenter: parent.verticalCenter }
            AnchorChanges { target: dlgAccountOptions; anchors.horizontalCenter: parent.horizontalCenter }
            PropertyChanges { target: dlgAccountOptions; scale: 1 }
            PropertyChanges { target: dlgAccountOptions; z: 10 }
        },
        State {
            name: "hidden"
            AnchorChanges { target: dlgAccountOptions; anchors.top: parent.bottom }
            AnchorChanges { target: dlgAccountOptions; anchors.left: parent.right; }
            PropertyChanges { target: dlgAccountOptions; anchors.leftMargin: -100 }
            PropertyChanges { target: dlgAccountOptions; scale: 0.1 }
            PropertyChanges { target: dlgAccountOptions; z: 0 }
        }
    ]
    transitions: [
        Transition {
            from: "hidden"; to: "visible"
            ParallelAnimation {
                NumberAnimation { duration: howLong; property: "scale"; easing.type: Easing.InOutQuad }
                AnchorAnimation { duration: howLong; easing.type: Easing.InOutQuad }
                onRunningChanged: {
                    if( running == true ) { dlgAccountOptions.visible = true }
                }
            }
        },
        Transition {
            from: "visible"; to: "hidden"
            ParallelAnimation {
                NumberAnimation { duration: howLong; property: "scale"; easing.type: Easing.InOutQuad }
                AnchorAnimation { duration: howLong; easing.type: Easing.InOutQuad }
                onRunningChanged: {
                    if( running == false ) { dlgAccountOptions.visible = false }
                }
            }
        }
    ]

}
